<template>
	<view class="page">
		<!-- #ifdef H5 -->
			<topVue rightIcon="server-fill" title="AI视频创作"></topVue>
		<!-- #endif -->

		<scroll-view class="main-content" scroll-y>
			<!-- 轮播图 -->
			<view class="w100 margin0">
				<u-swiper :list="banners" height="360" name="coverUrl"></u-swiper>
			</view>

			<!-- 声音创作/视频创作 -->
			<view class="section margin20 flex-between">
				<div class="li flex-column flex-center align-center" @click="isLogin ? $tools.route('./voice') : $store.state.show = true">
					<u-icon name="mic" color="#fff" size="48"></u-icon>
					<u-gap height="10"></u-gap>
					<text>AI声音创作</text>
				</div>
				<div class="li flex-column flex-center align-center" @click="isLogin ? $tools.route('./video') : $store.state.show = true">
					<u-icon name="camera-fill" color="#fff" size="48"></u-icon>
					<u-gap height="10"></u-gap>
					<text>AI视频创作</text>
				</div>
			</view>

			<!-- 教程学习 -->
			<view class="h2">教程学习</view>
			<view class="scrollVue">
				<scroll-view class="scroll-view_H" scroll-x="true">
					<view class="li relative" v-for="(item, index) in videoTutorial" :key="index">
						<image src="../../static/play.png" style="width: 80rpx; height: 80rpx;z-index: 99; top: 250rpx;" class="absolute-center" @click="playVideo(item.url)"></image>
						<image :src="item.url+'?x-oss-process=video/snapshot,t_1,f_jpg,w_420,m_fast,ar_auto'"  style="width: 420rpx; height: 580rpx; border-radius: 12rpx 12rpx 0 0;"></image>
						<view class="botText line-1 text-center">{{item.title}}</view>
					</view>
				</scroll-view>
			</view>

			<!-- 最新动态 -->
			<!-- <view class="h2">最新动态</view>
			<view class="item flex align-center margin0 padding-row30">
				<u-icon name="volume-fill" color="#59D386" size="40"></u-icon>
				<view class="text line-1 flex-1">10月18日 AIET AI轻创业+新美业开始啦开始啦开始啦</view>
			</view> -->

			<!-- 用户案例 -->
			<view class="flex-between">
				<view class="h2">用户案例</view>
				<text style="color: #6AA1F8; text-decoration: underline; padding-top: 30rpx;"  v-if="userCase.length===4" @click="$tools.route('./moreVideo')">更多案例</text>
			</view>
			<view class="scrollVue">
				<scroll-view class="scroll-view_H" scroll-x="true">
					<view class="li relative" v-for="(item, index) in userCase" :key="index">
						<image src="../../static/play.png" style="width: 80rpx; height: 80rpx;z-index: 99; top: 250rpx;" class="absolute-center" @click="playVideo(item.videoUrl)"></image>
						<image :src="item.videoUrl+'?x-oss-process=video/snapshot,t_1,f_jpg,w_420,m_fast,ar_auto'" mode="aspectFill" style="width: 420rpx; height: 580rpx;"></image>	
						<view class="botText text-center line-1 padding-row20">{{item.name}}</view>
					</view>
				</scroll-view>
			</view>
		</scroll-view>

		<!-- 底部Tabbar -->
		<u-tabbar
			v-model="$store.state.tabbarCurrent"
			:list="$store.state.tabbar"
			icon-size="70"
			height="120rpx"
			active-color="#fff"
			inactive-color="#fff"
			:bg-color="bgColor"
			@change="tabbarChange"
		></u-tabbar>

		<!-- 登录 -->
		<loginVue :show="$store.state.show"></loginVue>
		
		<!-- 播放视频 -->
		<myVideo ref="myVideo" v-show="isPlay" @quit="isPlay = false"></myVideo>
	</view>
</template>

<script>
	import myVideo from "@/components/myVideo.vue"
	import { mapState } from "vuex"
	export default {
		components: {
			myVideo
		},
		data() {
			return {
				banners: [],
				bgColor: "linear-gradient(to right, #49DC83, #3B83F4)",
				videoTutorial: [],
				userCase: [],
				videoSrc: "",
				isPlay: false
			}
		},
		async onLoad() {
			await this.getBanners()
			await this.getVideoTutorial()
			await this.getUserCase()
		},
		computed: {
			...mapState({
				isLogin: state => state.isLogin
			})
		},
		methods: {
			tabbarChange(index){
				this.$store.state.tabbarCurrent = index;
				uni.setStorageSync("tabbarCurrent", index)
				uni.switchTab({
					url: this.$store.state.tabbar[index].path
				})
			},
			
			playVideo(videoUrl){
				this.isPlay = true
				this.$refs.myVideo.videoPlay(videoUrl)
			},

			// 获取轮播图
			async getBanners(){
				const res = await this.$request("/shuziren/carousels", {}, "GET")
				if(res.code===200) this.banners = res.data
			},

			// 获取全部视频教程
			async getVideoTutorial(){
				const res = await this.$request("/shuziren/videoTutorial", {}, "GET")
				if(res.code===200) this.videoTutorial = res.data
			},

			// 获取用户案例
			async getUserCase(){
				const res = await this.$request("/shuziren/userVideo/public", {
					pageNum: 0,
					pageSize: 4
				}, "GET")
				if(res.code===200) this.userCase = res.data.content
			},
		}
	}
</script>

<style lang="less" scoped>
	/deep/ .uni-video-container {
		background-color: transparent;
	}
	.main-content {
		width: 100%;
		height: calc(100vh - var(--window-bottom) - var(--window-top) - 212rpx);
		padding: 30rpx;
		box-sizing: border-box;
		background: linear-gradient(to bottom, #EBF3FD, #DBF8E9);
		.section {
			width: 690rpx;
			height: 138rpx;
			.li {
				width: 330rpx;
				height: 138rpx;
				background: #18AB4E;
				border-radius: 10rpx;
				text {
					font-size: 24rpx;
					color: #fff;
				}
			}
			.li:nth-child(2) {
				background: #2A6BEE;
			}
		}
		.h2 {
			font-weight: 700 ;
			font-size: 30rpx;
			color: #000;
			padding: 30rpx 0 20rpx 0;
		}
		.scrollVue {
			width: 690rpx;
			height: 680rpx;
			.scroll-view_H {
				width: 690rpx;
				height: 680rpx;
				white-space: nowrap;
				.li {
					width: 420rpx;
					height: 680rpx;
					background: #fff;
					display: inline-block;
					margin-right: 30rpx;
					border-radius: 12rpx;
					image {
						width: 420rpx;
						height: 580rpx;
						border-radius: 12rpx 12rpx 0 0;
					}	
					.botText {
						width: 100%;
						height: 100rpx;
						line-height: 100rpx;
						padding: 0 20rpx;
					}
				}	
				.li:nth-last-child(1) {
					margin-right: 0;
				}
			}
		}
		.item {
			width: 690rpx;
			height: 120rpx;
			background: #fff;
			border-radius: 12rpx;
			.dot {
				width: 120rpx;
				height: 120rpx;
				background: #EBEDED;
				border-radius: 10rpx;
			}
			.text {
				padding-left: 15rpx;
				font-weight: 600;
			}
		}
	}
</style>
